<!--url借阅管理-->
<template>
  <div class="url-borrow">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-jieyue1" />
        </div>
        <span>url借阅管理</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="check-circle" class="icon-button">启用</a-button>
        <a-button type="primary" icon="stop" class="icon-button">停用</a-button>
        <a-input-search placeholder="请输入内容" enter-button />
      </div>
      <div class="card-table">
        <div class="url-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="url-left-tree" v-if="!isShowLeftTree">
            <a-tree
              blockNode
              show-line
              :treeData="treeData"
              defaultExpandAll
              v-if="treeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="url-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <splitpanes horizontal>
            <pane size="50">
              <el-table
                :data="urlTableData"
                highlight-current-row
                border
                height="100%"
                :row-style="{height:'40px'}"
                :cell-style="{padding:'0px'}"
                :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                style="width: 100%">
                <slot v-for="(item,index) in urlColumns">
                  <el-table-column
                    :key="index"
                    :property="item.field"
                    :label="item.title"
                    :width="item.width"
                    show-overflow-tooltip
                    sortable>
                  </el-table-column>
                </slot>
                <el-table-column label="操作">
                  <template>
                    <a>编辑</a>
                    <a-divider type="vertical" />
                    <a>删除</a>
                  </template>
                </el-table-column>
              </el-table>
            </pane>
            <pane size="50">
              <el-table
                :data="fullTableData"
                highlight-current-row
                border
                height="100%"
                :row-style="{height:'40px'}"
                :cell-style="{padding:'0px'}"
                :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                style="width: 100%">
                <slot v-for="(item,index) in fullColumns">
                  <el-table-column
                    :key="index"
                    :property="item.field"
                    :label="item.title"
                    :width="item.width"
                    show-overflow-tooltip
                    sortable>
                  </el-table-column>
                </slot>
              </el-table>
            </pane>
          </splitpanes>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: 'BorrowManage',
  components: {
    Splitpanes,
    Pane
  },
  data () {
    return {
      isShowLeftTree: false, // 左侧显示与隐藏
      treeData: [
        {
          title: '2018',
          key: '1'
        },
        {
          title: '2019',
          key: '2'
        },
        {
          title: '2020',
          key: '3',
          children: [
            {
              title: '1月',
              key: '4'
            },
            {
              title: '2月',
              key: '5'
            },
            {
              title: '3月',
              key: '6'
            },
            {
              title: '4月',
              key: '7'
            },
            {
              title: '5月',
              key: '8'
            },
            {
              title: '6月',
              key: '9'
            }
          ]
        }
      ],
      urlTableData: [],
      urlColumns: [
        {
          title: '借阅url',
          field: 'BC_Url'
        },
        {
          title: '借阅部门',
          field: 'BC_BM'
        },
        {
          title: '借阅人',
          field: 'BC_Man'
        },
        {
          title: '提取码',
          field: 'BC_Code'
        },
        {
          title: '有效时间',
          field: 'BC_ExpireTime'
        },
        {
          title: '是否打印',
          field: 'BC_EnablePrint'
        },
        {
          title: '是否下载',
          field: 'BC_EnableDownload'
        },
        {
          title: '是否启用',
          field: 'IsEnable'
        },
        {
          title: '水印文字',
          field: 'BC_WaterMark'
        },
        {
          title: '备注',
          field: 'Remark'
        }
      ],
      fullTableData: [],
      fullColumns: [
        {
          title: '顺序号',
          field: 'AI_Index'
        },
        {
          title: '文件名',
          field: 'AI_Name'
        },
        {
          title: '文件大小',
          field: 'AI_Size'
        },
        {
          title: '上传时间',
          field: 'AI_UploadDateTime'
        },
        {
          title: '创建时间',
          field: 'AI_FileDateTime'
        },
        {
          title: 'OCR状态',
          field: 'AI_IsOCR'
        }
      ]
    }
  },
  created () {},
  mounted () {
  },
  methods: {
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    }
  }
}
</script>
<style lang="less" scoped>
.url-borrow {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .ant-card {
    /deep/ .ant-card-head {
      .ant-card-extra {
        width: 50%;
        &>div {
          display: flex;
        }
      }
    }
    .card-table {
      height: 100%;
      .url-left {
        float: left;
        width: 18%;
        height: 100%;
        border: 1px solid #EBEEF5;
        border-right: none;
        position: relative;
        transition: all 0.2s;
        .url-left-tree {
          height: 100%;
          overflow: auto;
        }
        .handle {
          position: absolute;
          right: -18px;
          top: 50%;
          margin-top: -32px;
          z-index: 100;
          cursor: pointer;
        }
      }
      .url-right {
        float: left;
        width: 82%;
        height: 100%;
        transition: all 0.2s;
      }
    }
  }
}
</style>
